<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>普通菜单 using json</title>
<link href="/kissy/build/css/dpl/base.css" rel="stylesheet"/>
<link href="../assets/menu.css" rel="stylesheet"/>
<link href="../assets/menuitem.css" rel="stylesheet"/>
<link href="../assets/submenu.css" rel="stylesheet"/>
<style>
    .ks-menuitem-delete {
        color: #000000;
        left: auto;
        padding-right: 6px;
        position: absolute;
        right: 0;
        text-align: right;
        border: 1px solid red;
        margin-right: 5px;
        padding: 0 5px;
    }

    .ks-menu-disabled .ks-menuitem-delete {
        color: #ccc;
        border: #ccc;
    }
</style>
<style>
    h1 {
        font-size: 2em;
        margin: 10px;
        text-align: center;
    }

    h2 {
        font-size: 1.5em;
        margin: 10px;
        text-align: center;
    }

    #wrap {
        width: 90%;
        margin: 0 auto;
    }
</style>
</head>
<body>
<div id="wrap">
    <h1 id="describe">普通菜单 using json</h1>

    <div id="menuitem_container" style="width:200px;position:relative;height:150px;">

    </div>
    <label>禁用：<input type="checkbox" id='dis'/></label>

</div>
<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script>


    KISSY.use("util,node,menu,separator",
            function (S, util,Node, Menu) {

                var menu = new Menu({

                    render:"#menuitem_container",
                    children:[
                        {
                            xclass:'submenu',
                            content:"submenu",
                            menu:{
                                // boolean，是否鼠标脱离菜单后自动隐藏
                                autoHideOnMouseLeave:true,
                                children:[
                                    {
                                        elStyle:{
                                            color:"red"
                                        },
                                        content:"sub menuitem1"
                                    },
                                    {
                                        xclass:'separator'
                                    },
                                    {
                                        content:"sub menuitem2"
                                    }
                                ]
                            }
                        },
                        {
                            xclass:'menuitem',
                            content:"alone"
                        }
                    ],

                    listeners:{
                        click:{
                            fn:function (ev) {
                                S.log("selected : " + ev.target.get("content"));
                            }
                        }
                    }
                }).render();

                var dis = Node.one("#dis");

                dis.on("click", function () {
                    menu.set('disabled', !!dis[0].checked);
                    var children = menu.get('children');
                    util.each(children, function (child) {
                        child.set('disabled', !!dis[0].checked);
                    });
                });

                dis[0].checked = false;
            });
</script>
</body>
</html>